import { Modal, Tag, Drawer, Button } from 'antd'
import ExcelTable from '@components/exportExcel'
import LogForm from '@/pages/setting/logManage/components/LogForm'
import { useRef, useState } from 'react'
import { ActionType, ProFormInstance } from '@ant-design/pro-components'

const UserLog: React.FC = () => {
    useRef<ActionType>()
    useRef<ProFormInstance>()
    const [tableItem, setTableItem] = useState()
    const [detailDrawer, setDetailDrawer] = useState(false)
    function showAddDrawer(item: any) {
        setTableItem(item)
        setDetailDrawer(true)
    }

    function onCloseDrawer() {
        setDetailDrawer(false)
    }
    return (
      <>
          <ExcelTable
            requestFn={ params => {
                return {
                    'code': 200,
                    'message': '操作成功',
                    'data': {
                        'pageNum': 1,
                        'pageSize': 20,
                        'totalPage': 1,
                        'total': 3,
                        'list': [
                            {
                                createTime: '2022-02-20 13:50:15',
                                person: 'admin',
                                type: '1',
                                mode: '首页',
                                content: '用户信息-修改用户信息',
                                ip: '【中国/成都】192.168.1.1',
                            },
                            {
                                createTime: '2022-02-20 13:50:15',
                                person: 'admin',
                                type: '1',
                                mode: '首页',
                                content: '用户信息-修改用户信息',
                                ip: '【中国/成都】192.168.1.1',
                            },
                            {
                                createTime: '2022-02-20 13:50:15',
                                person: 'admin',
                                type: '1',
                                mode: '首页',
                                content: '用户信息-修改用户信息',
                                ip: '【中国/成都】192.168.1.1',
                            }
                        ]
                    }
                }
            }}
            rowSelection={false}
            toolBarRenderFn={() => []}
            columns={[
                {
                    title: '操作时间',
                    dataIndex: 'keyword7',
                    valueType: 'dateRange',
                    hideInTable: true
                },
                {
                    title: '操作人',
                    dataIndex: 'keyword6',
                    hideInTable: true
                },
                {
                    title: '操作内容',
                    dataIndex: 'keyword',
                    hideInTable: true
                },
                {
                    title: '操作状态',
                    dataIndex: 'keyword5',
                    hideInTable: true,
                    valueType: 'select',
                    valueEnum: {
                        all: '全部'
                    }
                },
                /** search */
                {
                    title: '序号',
                    valueType: 'index',
                    hideInSearch: true
                },
                {
                    title: '操作时间',
                    dataIndex: 'createTime',
                    hideInSearch: true,
                    valueType: 'dateTime'
                },
                {
                    title: '操作人',
                    dataIndex: 'person',
                    hideInSearch: true
                },
                {
                    title: '操作状态',
                    dataIndex: 'type',
                    hideInSearch: true,
                    render: (_, record) => {
                        return <Tag color={record.type == 1 ? 'success' : 'error'}>{record.type == 1 ? '成功' : '失败'}</Tag>
                    }
                },
                {
                    title: '操作模块',
                    dataIndex: 'mode',
                    hideInSearch: true
                },
                {
                    title: '操作内容',
                    dataIndex: 'content',
                    hideInSearch: true
                },
                {
                    title: '操作IP',
                    dataIndex: 'ip',
                    hideInSearch: true
                },
                {
                    title: '操作',
                    key: 'option',
                    valueType: 'option',
                    render: (_, record) => [
                        <a key="disabled" onClick={() => showAddDrawer(record)}>详情</a>,
                        <a key="delete" onClick={() => {
                            Modal.warning({
                                title: '提示',
                                content: '确定删除该记录吗?',
                                okText: '确定',
                                okCancel: true,
                                onOk() {
                                    console.log('Confirmed:onOk ')
                                }
                            })
                        }}>删除</a>
                    ]
                }
            ]} />
          <Drawer title="详情" onClose={onCloseDrawer} open={detailDrawer} destroyOnClose>
              <LogForm item={tableItem} onClose={onCloseDrawer}></LogForm>
          </Drawer>
      </>
    )
}

export default UserLog